<script setup lang="ts">
import img from "@/assets/timer.png"
import { computed, onMounted, ref, watch } from "vue";
import JHead from '@/components/j-head/index.vue';
import JNumber from '@/components/j-number/index.vue';
import JLoading from '@/components/j-loding/index.vue';
import DomDrag from "@/comm/DomDrag";
import { useKline } from "@/stores/kline";
import { useCore } from "@/hooks/useCore";
import { toast } from "@/components/toast/toast";
const kline = useKline();
const core = useCore();
// defineProps({
//     recommends: Array<any>,
// })

const loading = computed(()=>{
    return kline.recommendationLoading
})

watch(()=>kline.curInterval, (newVal, oldVal)=>{
    if(!oldVal){
        // console.warn("kline.getRecommendations();")
        kline.getRecommendations();
    }
    else{
        if(newVal.name != oldVal.name){
            // console.warn("kline.getRecommendations();")
            kline.getRecommendations();
        }
    }
    
})

const recommends = computed(() => {
    var t = [...kline.recommendations];
    t.sort((a: any, b: any) => {
        return Math.abs(a.bias144) > Math.abs(b.bias144) ? 1 : -1;
    });
    console.log("切换币对------")
    return t;
});

const onJump = (str:string)=>{
    // kline.changeCurCoinByName(str);
    let item:any = kline.getCoinByName(str);
    if(item){
        core.switchCoin(item);
    }
    else{
        toast("Not find " + str)
    }
    
}

const onClose = () => {
    kline.TableRecommend = false;
}
const table = ref();
onMounted(() => {
    // console.log("jsz onMounted table")
    DomDrag.setDrag(table.value);
})
</script>
<template>
    <div ref="table" class="table c-title-5 visible rec-list" id="tableRecommend" v-show="kline.TableRecommend">
        <!-- <JHead @onClose="onClose" text="推荐列表"> -->
        <div style="padding: 0 7px 5px 7px;">
            <JHead @onClose="onClose" :text="$t('message.TableRecommend.a')" move-style>
                <template #icon>
                    <span class="iconfont icon-yibiaopan ani-font"></span>
                </template>
            </JHead>
        </div>
        <VRow no-gutters class="flex-0-1 row-line" style="color: var(--color);padding: 4px 0 4px 0;">
            <!-- <VCol cols="4"><span>交易对</span></VCol> -->
            <VCol cols="4"><span class="pl-10p">{{ $t('message.TableRecommend.b') }}</span></VCol>
            <!-- <VCol cols="4"><span>最新价</span></VCol> -->
            <VCol cols="4"><span>{{ $t('message.TableRecommend.c') }}</span></VCol>
            <!-- <VCol cols="4"><span>背离值</span></VCol> -->
            <VCol cols="4"><span class="pr-10p">{{ $t('message.TableRecommend.d') }}</span></VCol>
        </VRow>
        <div class="flex-1-1 pr-2 overflow-x-hidden rowss">
            <!-- <JLoading v-show="loading"></JLoading> -->
            <VRow no-gutters v-for="item in recommends" :key="item.id" class="pt-1 row-line">
                <VCol cols="4"><span class="pl-10p tts" @click="onJump(item.symbol)">{{item.symbol}}</span></VCol>
                <VCol cols="4">
                    <JNumber :num="item.close" :is-color="true" price prefix="$"></JNumber>
                </VCol>
                <VCol cols="4">
                    <JNumber :num="item.bias144" :is-color="true" suffix="%"></JNumber>
                </VCol>
            </VRow>
        </div>
    </div>
</template>
<style lang="less" scoped>
.table{
    height: 195px !important;
}
.pl-10p {
    padding-left: 10px;
}
.tts{
    &:hover{
        text-decoration: underline;
    }
}

.pr-10p {
    padding-right: 10px;
}
.rowss{
    height: 120px;
    overflow-y: auto;
}
.row-line {
    position: relative;
    padding: 4px 0;

    &::after {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 1px;
        background-color: #444;
    }
}

.table {
    width: 326px;
    height: 190px;
    border-radius: 4px;
    background-color: rgba(54, 59, 67, 0.7);
    // padding: 10px;
    padding: 10px 0 10px 0;
    position: fixed;
    top: 22%;
    left: 5%;
    box-shadow: 3px 4px 4px rgba(0, 0, 0, 0.5);
    z-index: 10;

    img {
        width: 16px;
        height: 16px;
    }

    .icon-naozhong {
        font-size: 16px;
    }

    .header {
        display: flex;
    }

    .v-col {
        padding-block: 0;
    }

    .v-col:nth-child(2) {
        padding-left: 30px;
        text-align: left;
    }

    .v-col:nth-child(3) {
        text-align: right;
    }
}

.hd-re {
    margin: 6px;
}

.ani-font {
    animation: move 1s;
    animation-iteration-count: infinite;
}

@keyframes move {
    0% {
        color: #ff0000;
    }

    50% {
        color: rgb(0, 255, 136);
    }

    100% {
        color: #ff0000;
    }
}
</style>
